<template>
  <div>
    <div class="parent">
      <!-- 🔔 2. 根据组件名自己调用自己，如果还有父评论数据，继续调用自己 -->
      <ContentParent
        v-if="parent.parent"
        :parent="parent.parent"
        @parentCommentFn="parentCommentFn"
        :num5='num4'
      ></ContentParent>
      <p class="parent-header">
        <span>{{ parent.user.nickname }}</span>
        <span class="center">{{ parent.create_date }}</span>
        <span>楼层{{ num2 }}</span>
        <span class="repy" @click="parentCommentFn">回复</span>
        
      </p>
      <p class="content">
        {{ parent.content }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
 
  data() {
    return {
      num2:0,
      num4:1,
    };
  },
  // 🔔 1. 给组件自己起个名字
  name: "ContentParent",
  props: {
    parent: Object,
  },
  methods: {
    parentCommentFn() {
      this.$emit("parentCommentFn", this.parent);
    },
    
  },
  created() {
    let num1 = 1;
    this.num4++
    let parent = this.parent //钩子函数里面的函数没办法直接用props的东西，要设值
    let digui = function (parent) {
      //最外层的parent.parent为null，如果不是则num+1，parent.parent里面有嵌套的楼层，再次调用函数
      if (parent.parent != null) {
        num1++;
        return digui(parent.parent);
      }
    }
    digui(parent);
    this.num2 = num1
  },
};
</script>

<style lang="less" scoped>
.parent {
  border: 1px solid red;
  padding: 5px;
  .parent-header {
    font-size: 12px;
    color: #999;
    display: flex;
    .center {
      margin-left: 20px;
      flex: 1;
    }
  }
  .content {
    padding: 10px 0;
  }
  .repy {
    position: relative;
    z-index: 11;
  }
}
</style>